<template>
  <div>
    <a-button type="primary" @click="showModal">
      选择图标
    </a-button>
    <a-modal v-model="visible" title="图标" @ok="handleOk">
      <a-radio-group name="radioGroup" :default-value="0" >
        <span v-for="(i,index) in this.imgList" @click="choose(index)">
          <div style="width: 94px;height: 60px; float: left">
              <img width="50xp"  height="50px" :src="i.imgString" style="float: left;margin-top: 5px">
              <span style="float: left;margin-top: 48px;margin-left: -33px">
                <a-radio :value="index" style="">
                </a-radio>
              </span>
            <br v-if="index === 4" />
          </div>
      </span>
      </a-radio-group>
      <div style="margin-top: 45px;" align="center">
        <a-pagination simple :default-current="1" :total="total" @change="change"/>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {getAction} from '@api/manage'

export default {
  components:{
    getAction
  },
  name: "ColumnImgPageList",
  data() {
    return {
      visible: false,
      listUrl: '/columnImg/philColumnImg/list',
      imgList:[],
      total:0,
      currentImgString:null,
      imgPreList:[]
    };
  },
  created() {
    this.getSource(1,10)
  },
  methods: {
    getSource(page,pageSize){
      let params={
        pageNo:page,
        pageSize:pageSize
      }
      getAction(this.listUrl,params).then(res=>{
        this.imgList = res.result.records
        this.total = res.result.total
        // 一句话解决深拷贝问题
        this.imgPreList = JSON.parse(JSON.stringify(res.result.records));
        // 重新修正文章显示
        for (let i = 0; i < this.imgList.length; i++) {
          this.imgList[i].imgString = window._CONFIG['domianURL']+'/'+this.imgList[i].imgString
        }
        console.log(this.imgList)
      })
    },
    // 改变页码
    change(page,pageSize){
      console.log(page,pageSize)
      this.getSource(page,pageSize)
    },
    // 选择时，设置current图片id
    choose(index){
      this.currentImgString = this.imgPreList[index].imgString
      // console.log(this.currentImgId)
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      // console.log(e);
      this.$emit("getImgString",this.currentImgString)
      this.visible = false;
    },
  },
}
</script>

<style scoped>

</style>